import { InbizIcon, webDataSourceClick } from '@inbiz/utils';
import { useInbizRouter } from '@inbiz/hooks';
import { TextWidget } from '@inbiz/react';

import styles from '../style.less';
export default function StandardList(props: any) {
  const { newDataSource, contentType, fontSize, titleColor, lineBackground, lineHeight } = props;

  const history = useInbizRouter();

  return (
    <div>
      {/* <p>标准视图</p> */}
      <ul className={styles.listWrap}>
        {newDataSource.map((item: any, index: number) => {
          let nameFontSize = fontSize;
          let nameColor = titleColor;
          if (item.cardStyle) {
            nameFontSize = item.nameFontSize ?? fontSize;
            nameColor = item.nameColor ?? titleColor;
          }

          return (
            <li
              className={styles['item']}
              key={`standard-${index}`}
              onClick={() => {
                props.emit && props.emit('onclick', item);
                webDataSourceClick(history, item);
              }}
              style={{
                background: lineBackground,
                height: lineHeight ?? 44
              }}
            >
              <div
                style={{ width: '100%', display: 'flex', alignItems: 'center' }}
              >
                {contentType !== 2 && item.icon?.type && (
                  <InbizIcon
                    className={styles.item_icon}
                    type={item.icon?.type || ''}
                    style={{
                      color: item.icon?.color || '#999',
                      fontSize: `${item.icon?.size || 24}px`,
                      marginLeft: 10,
                    }}
                  />
                )}

                {contentType !== 3 && (
                  <span
                    className={styles.item_title}
                    style={{
                      width: 'calc(100% - 70px)',
                      fontSize: `${nameFontSize}px`,
                      paddingLeft: 10,
                      color: nameColor,
                    }}
                  >
                    <TextWidget>{item.title}</TextWidget>
                  </span>
                )}
              </div>

              <InbizIcon
                style={{ position: 'absolute', right: '10px', color: '#bcbcbc' }}
                type={'icon-ic-arrow-right-bold'}
              />
            </li>
          )
        })}
      </ul>
    </div>
  );
}
